<template>
	<view class="page-container be-service-user-list-container">
		<view class="be-service-user-list">
			<view class="be-service-user-list-item" :class="{'be-service-user-list-item-active': item.id == user.id}"
				v-for="(item, index) in list" :key="index" @click="selectConfirm(item)">
				<view class="">
					<text>{{ item.name }} {{ item.sex == 1 ? '男' : '女' }} {{ item.gx }}</text>
				</view>
				<view class="icon-48" @click.stop="gotoPage(item)">
					<image :src="$img_path('/home/icon-edit-red.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="display-flex alig center" v-if="list.length === 0">
			<text>暂无数据</text>
		</view>
		<view class="fixed-btn-box">
			<view class="fixed-btn common-btn-bg-color" @click="gotoPage()">
				<text>添加被服务人员信息</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBfwList
	} from "@/utils/api/serviceApi.js"
	export default {
		data() {
			return {
				user: {},
				list: []
			};
		},
		onLoad() {
		},
		onShow() {
			this.getBfwList()
		},
		methods: {
			gotoPage(user) {
				const that = this
				const str = user ? `?user=${encodeURIComponent(JSON.stringify(user))}` : ''
				uni.navigateTo({
					url: "/pagesService/beServiceUserList/editBeServiceUser" + str,
					success:function(){
						uni.$once("refreshServiceUserList", () => {
							that.getBfwList()
						})
					}
				})
			},

			async getBfwList() {
				try {
					const res = await getBfwList()
					console.log("getBfwList res", res)
					this.list = res.data
				} catch (e) {
					//TODO handle the exception
					console.log("getBfwList e", e)
				}
			},
			
			selectConfirm(data) {
				console.log("data", data)
				this.user = data
				uni.$emit("updateServiceBeUser", { data })
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.be-service-user-list-container {
		padding: 30rpx 24rpx;
		min-height: 100vh;
		background-color: #fff;
	}

	.be-service-user-list {}

	.be-service-user-list-item {
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx 26rpx;

		display: flex;
		align-items: center;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.be-service-user-list-item-active {
		background: #FFF9F9;
		border: 2rpx solid #E72A2A;
	}

	.icon-48 {
		width: 48rpx;
		height: 48rpx;
	}
</style>